<template>
    <div class="news">
        <Header/>
        <div v-if="menudatalist" class="third_show bh_500" :style="gbackg(this.$store.state.domain,menudatalist.imgs[0])" >
            <div class="text pages_w1470">
                <div class="en">{{menudatalist.alias}}</div>
                <div class="cn">{{menudatalist.name}}</div>
            </div>
            <img src="../assets/temp/bb6_2web.jpg" class="web" v-if="this.$route.params.cid==12">
            <img src="../assets/temp/bb6_2_1web.jpg" class="web" v-else>
        </div>
        <div class="second_box news_bj">
            <div class="pages_w1145">
                <div class="second-title">
                    <p class="cn" v-if="this.$route.params.cid==12">最新新闻</p>
                    <p class="cn" v-else>最新资讯</p>
                </div>
                <div class="swiper-news-show opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <swiper :options="swiperNewsShow">
                            <swiper-slide v-for="(item,index) in menudatalist.data " :key="index" v-show="index<3">
                                <div class="show fl-clr">
                                    <div class="img"><img :src="$store.state.domain+item.pic"></div>
                                    <div class="text">
                                        <div class="pa">
                                            <p class="time">{{item.intime|gdate('yyyy/MM/dd')}}</p>
                                            <div class="title">{{item.name}}</div>
                                            <div class="txt" v-html="item.info">
                                            </div>
                                            <router-link :to="{name: 'news_details', params :{id:item.id}}" class="more">READ MORE</router-link>
                                        </div>
                                    </div>
                                </div>
                            </swiper-slide>

                    </swiper>
                    <div class="swiper-pagination"></div>
                    <div class="swiper_more"><img src="../assets/images/more.svg"></div>
                </div>
            </div>

        </div>

        <router-view></router-view>


        <Footer/>
    </div>
</template>

<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
export default {
    components: {
        Footer,Header
    },
    data () {
        return {
            swiperNewsShow:{
                slidesPerView:1,
                spaceBetween:0,
                pagination: {
                    el: '.swiper-news-show .swiper-pagination',
                    clickable :true
                }
            }
        }
    },
    computed: {
        menudata() {
            if(JSON.stringify(this.$store.getters.getmenudata(7)).length>100){
                return this.$store.getters.getmenudata(7)
            }else{
                return false
            }
        },
        menudatalist() {
            if(JSON.stringify(this.$store.getters.getmenudatalist(7)).length>100){
                let temp = this.$store.getters.getmenudatalist(7);
                if(this.$route.params.cid==12){
                    temp = temp[0];
                }else{
                    temp = temp[1];
                }

                return temp;
            }else{
                return false
            }
        },
        menulistconfig() {
            return this.$store.getters.getmenuconfig
        }
    },
    methods: {
        gbackg(index,index2) {
            return "background: url("+index+index2+")";
        }
    },
    mounted () {
        $('.second_show .tips').fadeIn(1000)
        $('.second_show').addClass("show")
    }
}
</script>
